<template>
  <div>
    <div class="buttonUpdateNumDiv" ref="buttonUpdateNumDivRef"
         @mouseenter="intoUpdateNum()"
         @mouseleave="outUpdateNum()">
      <div @click="reduceVal()" class="reduce" ref="reduceRef">
        <div class="buttonUpdateNumDivTwo">-</div>
      </div>
      <div class="buttonUpdateNumDivThree">
        <span>{{currVals}}</span>
      </div>
      <div @click="addVal()" class="addNum" ref="addNumRef">
        <div class="buttonUpdateNumDivFive">+</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ButtonUpdateNum",
    props: {
      maxVal: {
        type: Number,
        default: 10
      },
      currVal: {
        type: Object,
        default: 1
      },
      borderCol: {
        type: String,
        default: "red"
      }
    },
    data() {
      return {
        maxVals: this.maxVal,
        currVals: this.currVal,
        borderColors: this.borderCol
      }
    },
    methods: {
      intoUpdateNum() {//当光标进入修改区域
        //let buttonEle = document.getElementsByClassName("buttonUpdateNumDiv")[0];
        let buttonEle = this.$refs.buttonUpdateNumDivRef;
        if (buttonEle) buttonEle.style.borderColor = `${this.borderColors}`
      },
      outUpdateNum() {//当光标脱离修改区域
        //let buttonEle = document.getElementsByClassName("buttonUpdateNumDiv")[0];
        let buttonEle = this.$refs.buttonUpdateNumDivRef;
        if (buttonEle) buttonEle.style.borderColor = "silver"
      },
      addVal() {//点击+按钮
        if (this.currVals < this.maxVals) {//如果小于或等于最大值才增加
          this.currVals++;
          //let tempReduceButton = document.getElementsByClassName("reduce")[0];
          let tempReduceButton = this.$refs.reduceRef;
          this.restoreButton(tempReduceButton)
          //恢复光标图案
          this.restoreCursor(tempReduceButton)
          //发送事件出去，传入当前的数量
          this.$emit("updateemit",this.currVals);
        }
        if (this.currVals == this.maxVals) { //判断当前值等于最大值
          //let tempAddButton = document.getElementsByClassName("addNum")[0]
          let tempAddButton = this.$refs.addNumRef;
          this.updateButton(tempAddButton);
          //修改光标图案
          this.updateCursor(tempAddButton);
        }
      },
      reduceVal() {//点击-按钮
        if (this.currVals > 1) {//必须大于0才可以减少
          this.currVals--;
          //let tempAddButton = document.getElementsByClassName("addNum")[0]
          let tempAddButton = this.$refs.addNumRef;
          this.restoreButton(tempAddButton);
          //恢复光标图案
          this.restoreCursor(tempAddButton);
          //发送事件出去，传入当前的数量
          this.$emit("updateemit",this.currVals);
        }
        if (this.currVals == 1) {//判断当前值等于0
          //let tempReduceButton = document.getElementsByClassName("reduce")[0];
          let tempReduceButton = this.$refs.reduceRef;
          this.updateButton(tempReduceButton)
          //修改光标图案
          this.updateCursor(tempReduceButton)
        }
      },
      updateCursor(element) {
        if (element) element.style.cursor = "not-allowed"
      },
      restoreCursor(element) {
        if (element) element.style.cursor = "pointer"
      },
      updateButton(element) {
        if (element) element.style.opacity = 0.3;
      },
      restoreButton(element) {
        if (element) element.style.opacity = 1;
      }
    }
  }
</script>

<style scoped>
  .buttonUpdateNumDiv {
    width: 215px;
    height: 45px;
    border: silver solid 1px;
    border-radius: 5px;
    display: flex;
    justify-content: center
  }

  .reduce {
    user-select: none;
    width: 70px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .buttonUpdateNumDivTwo {
    font-size: 40px;
    position: relative;
    bottom: 0px;
    font-weight: 100;
  }

  .buttonUpdateNumDivThree {
    width: 70px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .addNum {
    user-select: none;
    width: 70px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .buttonUpdateNumDivFive {
    font-size: 30px;
    position: relative;
    bottom: 0px;
    font-weight: 100;
  }
</style>
